<template>
  <div
    v-loading="loading"
    class="details"
  >
    <RecordBlock
      :descriptions="detailsFormat"
      :status="status"
    />
  </div>
</template>
<script>
import { getDriverList, getUseCarRecordDetail } from '@/api/vehicleService'
import RecordBlock from '@/views/approvalFlow/components/approvalRecordDetails/RecordBlock.vue'
export default {
  name: '',
  components: { RecordBlock },
  props: {
    recordId: {
      type: Number,
      default: null
    },

    status: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      details: null,
      loading: false,
      isSuccess: 1,
      driver: null,
      driverList: []
    }
  },
  computed: {
    detailsFormat() {
      const blocks = []
      const data = this.details

      if (!data) return blocks

      blocks.push({
        title: '申请人信息',
        blocks: [
          {
            label: '申请人姓名',
            value: data?.user?.username ?? '-'
          },
          {
            label: '联系方式',
            value: data?.user?.phone ?? '-'
          }
        ]
      })

      blocks.push({
        title: '司机信息',
        blocks: [
          {
            label: '司机姓名',
            value: data?.driver_name ?? '-'
          },
          {
            label: '司机驾照等级',
            value: data?.driver_license_type ?? '-'
          }
        ]
      })

      blocks.push({
        title: '用车信息',
        blocks: [
          {
            label: '使用车辆',
            value: data?.vehicle?.type?.name ?? '-'
          },
          {
            label: '用车时间',
            value: data?.vehicle_usage_time ?? '-'
          },
          {
            label: '客户名称',
            value: data?.customer_name ?? '-'
          },
          {
            label: '客户电话',
            value: data?.customer_phone ?? '-'
          },
          {
            label: '用车路线',
            value: data?.vehicle_route ?? '-'
          },
          {
            label: '用车原因',
            value: data?.car_reason ?? '-'
          },
          {
            label: '备注',
            value: data?.remark ?? '-'
          }
        ]
      })

      if (data.fail_reason) {
        blocks.push({
          title: '拒绝原因',
          blocks: [
            {
              label: '拒绝原因',
              value: data?.fail_reason ?? '-'
            }
          ]
        })
      }

      return blocks
    }
  },
  created() {
    this.getDetails()
    this.getDriverList()
  },
  methods: {
    async getDetails() {
      this.loading = true
      try {
        const res = await getUseCarRecordDetail(this.recordId)
        console.log('res --------->', res)
        this.details = res.data
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '信息获取失败')
      } finally {
        await this.sleep(500)
        this.loading = false
      }
    },

    async getDriverList() {
      try {
        const res = await getDriverList()
        console.log('res --------->', res)
        this.driverList = res.data.map(item => {
          return {
            value: item.id,
            label: item?.user?.username
          }
        })
      } catch (error) {
        throw new Error(error.message || '获取司机列表失败')
      }
    },

    sleep(t) {
      return new Promise(r => setTimeout(r, t))
    },

    stateTagOptions(state) {
      const m = {
        success: {
          label: '审核通过',
          type: 'success'
        },
        failed: {
          label: '审核失败',
          type: 'danger'
        },
        cancel: {
          label: '撤销',
          type: 'danger'
        }
      }

      return m[this.stateFormatter(state)] || { label: '待审核', type: 'info' }
    },

    stateFormatter(state) {
      if (state === 1) return 'success'

      if (state === 0) return 'failed'

      if (state === 2) return 'cancel'
    }
  }
}
</script>
<style lang="scss" scoped>
.details {
  min-height: 300px;
}
</style>
